Rosa nos hablaba el otro día sobre la forma de añadir un bonito efecto de nieve creado con un script de DynamicDrive
Otro efecto que me ha gustado mucho es el de Claudia de Girly Bogger es elegante y como ella bien puntualiza poco invasivo.
Siguiendo en la línea de efectos para el blog y también de la página de DynamicDrive es el efecto Floating images el autor Virtual Max ha creado un efecto suave de imágenes flotando.
A cualquiera de estos scripts podemos cambiarles las imágenes para que se adapte según las fechas o la temática como en este caso que sustituí los globos por iconos navideños.
Podemos añadir este efecto si nos situamos al final de la plantilla justo antes de </body>
"El siguiente script lo podéis descargar desde aquí o de la página del autor moveobj.js"
<script src='url-archivo-imagenflotante.js' type='text/javascript'> </script>
Justo después añadimos:
<script type='text/javascript'>/************************************************ Floating image script- By Virtual_Max (http://www.geocities.com/siliconvalley/lakes/8620)* Modified by Dynamic Drive for various improvements* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code***********************************************///Step 1: Define unique variable names depending on number of flying images (ie:3):var flyimage1, flyimage2, flyimage3function pagestart(){//Step 2: Using the same variable names as 1), add or delete more of the below lines (60=width, height=80 of image):flyimage1=new Chip("flyimage1",47,68);flyimage2=new Chip("flyimage2",47,68);flyimage3=new Chip("flyimage3",47,68);//Step 3: Using the same variable names as 1), add or delete more of the below lines:movechip("flyimage1");movechip("flyimage2");movechip("flyimage3");}if (window.addEventListener)window.addEventListener("load", pagestart, false)else if (window.attachEvent)window.attachEvent("onload", pagestart)else if (document.getElementById)window.onload=pagestart</script>Guardamos los cambios y nos situamos en plantilla de diseño para añadir un gadget escogemos la pestaña HTML/Javascript y en su interior añadimos lo siguiente:
<div id="flyimage1" style="position:absolute; left: -500px; width:47; height:68;"><a href="#"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjApAoiI-0eLwwdAVf2GqYr0-vV7SNMfiUNGWbhKbFxrRz9jeQ7GyNmP2_vX9vL9K_ggB4daTIqDD_K_TpOsG3Acrn6iWvP3bkPiZpiTomh17rAzaoEJSNhjlA444ZFlLe1EQ_/s0/bell.png"/></a></div><div id="flyimage2" style="position:absolute; left: -500px; width:47; height:68;"><a href="#"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvLPFRvrZa5m-xbbKCeTFmqe3OOCHxQyFqCd-h9k_Efhfm08qEgg8Y6YfJv3JVC_SZRj6cWmrQjU9OwuJhqx9Vggq40o4-6G7SYxCEYxIQlEIspITCMnIH0eS0merBgk6p9yX8/s0/santa.png"/></a></div><div id="flyimage3" style="position:absolute; left: -500px; width:47; height:68;"><a href="#"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZGjWODE7VqaS_mKbC-NYtCefAOSbbYSvtfa7rgffAUPHohlm_mh6fqEZ03xrPDRjZ3Hq6x4CJ8iahN673b99kC6rdz_KnLXo7ud6g5YBVIc1IazSUNdXt3sCp4cw-haQA3vfk/s0/star.png"/></a></div>En color azul es la url de las imágenes que podemos sustituir por cualquier otra, recomiendo que el tamaño no sea demasiado grande de lo contrario entorpecería la lectura del blog, otra idea sería añadir una sola imagen para ello bastaría con omitir el div que la añade, es decir sería suficiente con añadir:
<div id="flyimage1" style="position:absolute; left: -500px; width:47; height:68;"><a href="#"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjApAoiI-0eLwwdAVf2GqYr0-vV7SNMfiUNGWbhKbFxrRz9jeQ7GyNmP2_vX9vL9K_ggB4daTIqDD_K_TpOsG3Acrn6iWvP3bkPiZpiTomh17rAzaoEJSNhjlA444ZFlLe1EQ_/s0/bell.png"/></a></div>
Y en el script:
movechip("flyimage1");
Para añadir más imágenes sería a la inversa, añadimos al elemento de página una imagen más por ejemplo:
<div id="flyimage4" style="position:absolute; left: -500px; width:47; height:68;"><a href="#"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjApAoiI-0eLwwdAVf2GqYr0-vV7SNMfiUNGWbhKbFxrRz9jeQ7GyNmP2_vX9vL9K_ggB4daTIqDD_K_TpOsG3Acrn6iWvP3bkPiZpiTomh17rAzaoEJSNhjlA444ZFlLe1EQ_/s0/bell.png"/></a></div>
Y en el script:
movechip("flyimage4");
Las imágenes las podemos sustituir simplemente suprimiendo la parte de color azul y en su lugar añadiendo la url de vuestras imágenes.
También podemos hacer que esas imágenes sean un enlace para ello añadiremos la url de la página a enlazar sustituyendo el asterisco # (respetando las comillas)
Si hubiera venido antes!!!...se puede colocar otras imágenes como los globos, es el cumple de uno de los pekes!!!...a tenerlo en cuenta...besitos Gema!!!
Muy lindo el efecto Gem@!! la verdad es que queda muy bien con el decorado navideño, saludos :)
hola te queria preguntar que yo si estoy en mi blog en picasa hay fotos de mis trabajos
pero si quiero pasarla para que se vean no tengo idea como se hace
yo no las he puesto en picasa como se han puesto?
ademas todo el mundo tiene acceso a verlas?
gracias
Se puede poner cualquier imagen Graciela preferiblemente de fondo transparente, hay muchos y bonitos motivos para añadir, nubes, estrellas... yo añadí tres imágenes distintas para el ejemplo pero con as tres iguales queda en mi opinión mucho más fino.
Gracias Jaime :)
Piri todas las imágenes que subes a Blogger automáticamente van a Picasa pero no es como tener un álbum al que puedes restringir las visitas y hacerlo privado.
Si tu preocupación es que tus imágenes sean públicas fuera de tu blog te diré que en Google puedes verlas todas.
Haz la prueba y escribe en Google el nombre de tu blog luego clica arriba en imágenes.
genial como siempre gema ,muchas gracias
besittosss
A ti Elisabeth :)
Paso a saludar Gem@...despues de tanto tiempo corresponde un saludito de vez en cuando no? Un abrazo enorme y muchos cariños !! desde Chile.
Blog muy copado, gracias por las herramientas.
buen truco pero si quisieramos agregar otra imagen?
como quedaria el javascript y los divs
aumentar
flyimage4
flyimage4=new Chip("flyimage4",47,68);
movechip("flyimage4");
div id="flyimage4"
bueno creo eso se debe añadir o nop?
jeje
es que quisiera cuatro imagenes jeje
dos pares
saludillos
espero tu pronta y eficaz respuesta
Hola gema recurro ati otra ves mira el problema es que cuando intento poner Ultimos comentarios no sale no se por que ya probado de todo pero no se que hacer gracias de antemano
Últimos comentarios con..."Fecha,nombre,título de la entrada, y un breve resumen"
a eso me refiero
Empieza a instalarse ya por todos los blogs de una manera u otra el "espiritu navideño", buen post.
Saludos
Hola Gema, tengo un houston, si abro mi pagina con firefox no veo los efectos, en IE si. Es cosa de la seguridad de firefox, ¿no?
Besos
Cariños también para ti Michael, gracias por dejar una prueba de haber estado aquí ;)
Gracias a ti también Emiliano :)
Jorge el script no habría que tocarlo, habría que añadir en html otro nuevo div para la imagen 4:
<div id="flyimage4" style="position:absolute; left: -500px; width:47; height:68;"><a href="#"><img border="0" src="url-imagen"/></a></div>
P2P comprueba si el alojamiento del script está online, si añadiste la url del script bien y por último si has sustituido la url de mi blog por la tuya.
Debería verlo instalado para decirte por qué no funciona.
Así es Sisco :)
Charo si te refieres al efecto nieve lo veo con los dos navegadores :O
Hay script que no se visualizan en Firefox pero este en concreto si.
muchisimas gracias por el dato!
como veraz ya lo utilice para mi blog (:
gracias gema!
Pues yo no lo veo en firefox, solo en IE, debe ser algún problemilla de seguridad que tengo. He añadido unas imágenes flotantes a Diario de otoño y me ocurre lo mismo. Echales un vistazo a ver que tal las ves.
Gracias
hola Gem@, sos un a verdadera joy@... he estado buscando en varias entradas cómo añadir otros tipos de letra a la sidebar fuera de los que ofrece la plantilla bloger. Me explico, hay un tipo de letra que deseo aparezca en los títulos de la sidebar pero como vez no sé cómo hacerlo... supongo que ya lo has explicado y debe ser de lo más sencillo, puedes remitirme a la entrada donde describes cómo hacerlo.... mil abrazos.
otra vez yo... gemit@, especificamente deseo que los títulos de la sidebar tengan este tipo de letra Edwardian Script ITC..
chaito
Hola gem@ soy Cristian, me encanta tu blog! me haz ayudado bastante y te doy las gracias..Me gustaría que me digieras como hago una tabla de contenidos como la tuya? lo que he tratado de hacer es con este código:
(a href="http://solobajistas.blogspot.com/search/label/?max-results=999")Todo el Contenido)(/a)
Lo he puesto entre parentesis para que lo puedas ver (creo que ya lo sabes) pero lo que quiero es que solo salgan los títulos de sus respectivas entradas ordenadas alfabeticamente, me podés ayudar?
Desde ya muchas gracias y te felicito por tu exitoso blog!!
Ese efecto de nieve me encanta Tatii y con el fondo más oscuro queda precioso.
Charo también las veo, pulsa la tecla f5 y control al mismo tiempo para actualizar la página puede ser eso.
También puede sprobar a añadir los dos script justo antes de </head> si con esas dos comprobaciones no lo ves entonces lo más probable que tu versión de Firefox no esté actualizada.
Flores literarias ese tipo de letra no lo admite Blogger pero tratandose de los títulos de la sidebar puede hacerse con un editor de imágenes, más o menos como si hiciéramos un botón para los títulos.
Si te decides debo recordarte que la imagen no debe medir más que la sidebar.
Cristian la tabla de contenidos que yo tengo trabaja con un script, no hice entrada alguna sobre ello y es larguísimo de explicar por lo que te recomiendo visitar a TextoVagabunda que es la fuente de información y lo explica con lujo de detalles.
No he podido localizar esa entrada en su blog quizás tu tengas más suerte ;)
mmmm..hola madrina...una pregunta tonta ¿no estas en technorati?..necesito un thumbnails tuyo y no te encuentro alli...☺☺☺
Technorati no me quiere Pizcos no le gusta el guión de mi url :(
Pero puedes coger el que quieras en sky Drive.
¿Te refieres a thumbnailviewer?
es para hacerte "publi" por no currarme un thumbnails de tu blog...ya mañana lo hare...me falta el tuyo y el de Fernando que tampoco esta...
Siempre inventando :)
Gem@ el efecto nieve de Charo si lo veo con FireFox, pero en el otro blog las imagens flotantes no las veo, a lo mejor es el Adblock de FF, voy a probar de desactivarlo a ver que pasa...
Tardan un poquito pero si salen...
Le desactivé el Adblock Plus y en el blog de Yesi si las veo,(cuando estaba activado no) pero en el de Charo que tarda muuucho en cargar, Diario de Otoño, no veo las imagenes cuando termina de cargar tampoco.
Ahhhh... ahora si,(que cabezona que soy, insisto, insisto... ja ja) le di a f5 y si aparecieron las imagenes, pero tiene que desactivar el Adblock, sinó no salen ehh...
ok gemma gracias voy a intentar denuvo gracias
Gracias ahijado :)
k_nelita eres toda una maestra y estás en todas partes jajajaja al tener el correo abierto me llegan actualizaciones de comentarios tuyos aquí y allá.
Suerte P2P ;)
Soy como la mugre gem@ estoy en todos lados ja jaaaaa :D
Trabajo con el correo abierto también y donde veo algo que me interesa me meto juaaa, creo que estoy suscripta a los comentarios de toda la blogosfera jajaaaaj jaaaaaa :D
Gema gracias por este truquito, ya lo puse :D
jaja una se contagia con todo esto del concurso y la decoración navideña, eso que la temática de mi blog no da para esto!jaja
Saludos
K-nelita siempre me haces reir!!!!
Ya veo ya... K_nelita pero nunca haría esa comparación contigo ¡Qué cosas tienes mujer!
LuzdeLuna leíste mi pensamiento sobre la aplicación de este efecto, quedó lindo y elegante, en su justa medida ;)
Gem@ este script sería compatible con el de la nieve? Como van los dos antes de /body, por ahí crea conflicto, que crees?
Te pregunto pero igual voy a probar, ya sabés como soy...
Lo de la mugre se usa mucho aquí, no es malo, es como decir "el perejil de todas las salsas", no se si usan eso en España?
Besote ;)
No he probado los dos k_nelita pero si lo intentas y crea conflicto también puedes añadir uno antes de /head.
La definición de mugre es algo desagradable, aquí solemos decir "Estás hasta en la sopa" como diciendo que por muy extraño que sea el sitio allí está siempre.
Si, ahora veo donde pongo el script, tengo que alojar la imagen todavía...
Y ver en que blog voy a poner ese efecto, ja ja todo me gusta y después no se donde ponerlo...
Si, tienes razón es un poco feo lo de mugre, también decimos lo de la sopa, aunque en mi casa nadie toma ja ajjaa somos como Mafalda ja jaa Sopa puajjjjj!! :D
Ya está, aparentemente no hay conflicto de scripts, creo, porque quise agegarle una 4º imagen ya que son muy pequeñitas, casi tanto como los copitos de nieve y no me acepta la cuarta o sea no se ve..., en realidad quería ponerle 5 pero si no me acepta 4 que puede ser??
Puse el div todo como dices, o sea copie el anterior y le cambié el nº de 3 a 4, que será?? :o
A Pizcos Blogger ya le hizo el regalito de Navidad sabías? Le funciona el vista previa!
Acá no :(
Gem@ sabés, estuve mirando el script y pone solo 3 imagenes, estás segura que no hay que tocarlo para agregarle mas?
Porque está bien definido, dice image 1 imge 2 imge 3, tal vez por eso no acepte mas... que crees??
Lo logré!!!! Aleluya!!! :D Le modifiqué el script puse 5 imagenes y ahora si se ven las cinco, soy una genioooo!!! Que humilde ja jaaaaaa, mas que genio audáz diría yo, no? jajjaaaaa :D
Mira Aquí
Cuando puedas miralo y dame tu opinión si?
Besitos ;)
Siento tardar tanto k_nelita ando saturada estos días pero veo que eres una genia de las grandes :)
Quedaron bien lindas las estrellitas :)
como siempre GEM@, me parecen tus entradas excelentes.
Pero sabes que me gustaria que me explicaras(no se si ya lo tengas), es cambiar el icono de blogger por uno personalizado, lo he intentado mucho y no he podido.
gracias
Viste gem@ como me las rebusqué?? Soy una chapucera ja jaa, le metí mano al script, y al html, me la jugué, total dije si sale mal lo borro y listo, pero me salió bien ja ajaja. :D Estoy pensando en ponerle mas estrellitas, que te parece? Son tan chiquitas que creo que no son molestas no?
Le saqué la nieve, me parecía mucho, aunque no se, ahora la extraño, que opinás?
Como acá no hay nieve en estas épocas, bueno en mi ciudad en ninguna ja jaa creo que nevó dos o tres veces en la historia.
Querés que te haga envidiarme? Hoy hace 32º de temperatura ja jaa
Yo los envidio a ustedes cuando acá me muero de frío ja jaa :D
Está muy lindo de verdad k_nelita y es algo tan imperceptible que si añades más no molesta la lectura.
Aquí tenemos un invierno bastante bueno pero últimamente pasamos de un día caluroso a otro de mucho frío esos cambios no son buenos, y tampoco vemos la nieve por esta zona :)
Hola Migue no me di cuenta de tu comentario disculpa...
Ese icono de la barra e navegación te refieres ¿verdad? lo puedes cambiar siguiendo estos pasos:
Sobre favicón
Gema,
Pues yo querría poner los globos, me podrias decir, soy muy novata.
Gracias
Hola Pilar si te refieres a los globos de los comentarios mira esta entrada y sigue paso a paso las explicaciones. Cualquier duda me lo dices ;)
No, me refiero a los globos que dices que sustituiste en este efecto flotante, yo quería los globos en vez de los motivos navideños.
gracias
imagen1
imagen2
imagen3
Ahí van las imágenes Pilar.
ya tengo los globos pero querría que no flotasen tan rápido.
Saludos
pilar
Mira bien la plantilla Pilar poque creo que añadiste el script varias veces.
Ya lo arreglé, aunque y van mejor pero prefería que fuesen un poco mas lentos.
Muchas gracias.
pilar
¿Porqué, algunas veces entro en el blog y no se ve el efecto flotante y si vuelvo a entrar sí se ve?
habré hecho algo mal, pero no sé el qué.
graciñas
pilar
Hola Gema. Muy chévere el javascript... pero me gustaría hacerte una pregunta.
¿Cómo hago para que en mi diseño de blgger aparezca no las tres figuras flotando sino en "santa" que tienen en tu blog a la derecha?
Me parece más atractivo...
Gracias
http://casateatrodepopayan.blogspot.com
Pilar suele pasar que las imágenes no se muestran hasta que termina de cargar la página completamente.
Hola Juan Carlos yo puse a santa pero podría ser cualquier imagen. En realidad antes de Santa tenía una flecha que al clicar te lleva a INICIO, lo que hice fue cambiar la url de la imagen nada más.
Para añadirlo sin efecto, simplemente que nos lleve a INICIO mira aquí
Si prefieres ese efecto deslizante puedes ver como hacerlo aquí
En uno de mis blogs, Te Propongo, me pasa lo mismo que a Pilar, y si lo dejo que termine de cargar ehh, hasta que no le doy a f5 no salen la imagenes, en el otro si salen de entrada nomás, cuando termina la carga.
Me fijé por si fuera la ubicación del script, pero no, en la plantilla está en el mismo lugar en uno y en otro, los html, están mas o menos en la misma ubicación también, no se que será, también noté eso en otros blogs.
Se puede probar a añadir el script antes de </head> y ver el resultado.
Pués probeeeemosss ja jjaa :D
Ya te cuento ;)
ya cambié el script y nada no carga a la primera.
k_nelita ¿tu lo conseguiste? ....con lo que me gustaba
No, no :( cambié el script justo antes de /head, y también cambié el html un poquito mas abajo de la sidebar y la primera vez si lo cargó de entrada, pero después ya no, hay que darle al f5 para que salgan :(
Y si pongo el html al final de la sidebar? Que opinas? Ahora lo tengo en el segundo elemento de página, hace un rato lo tenía en el primero, funcionará abajo? :o
Lo voy a mirar con Explorer a ver que dice el mal...|O
k-nelita, yo ya cambie el html de sitio también y nada no va la primera. A ver si averiguas algo
No, no hay caso, en Explorer con la rapidés que lo caracteriza :o no se ven, ni dandole al f5 ni ctrl + f5 ni nada, no sale las imagenes :( o es mi Explorer o no funciona.
No cambié el html porque esperaba alguna opinión de gem@, pero si dices que no va... ya no se que pueda ser... :(
Alguien que opine al respecto a ver como lo ven, a lo mejor son nuestros navegadores... ya no se que pensar...
Veamos... según la página del autor del script debe verse con Explorer 4 y superiores.
El motivo por el que no se visualiza tengo que mirarlo.
Por otra parte k_nelita en Te propongo lo veo muy bien con Firefox quiero decir que carga rápido añadido antes de </head>.
En Folk Tango más de lo mismo.
Pilar en el tuyo no se ven con Firefox tampoco porque el script lo añadiste antes de <head>
Intenta añadirlo antes de </head> o antes de </body> la diferencia es que la etiqueta está cerrada.
<head> no sino </head>
Me olvidaba... Pilar en tu blog tal y como está si se visualiza con Explorer es de locos esto jajajaja
Gem@ mirando las plantillas de Pilar y Jabón jabón, son la misma persona? :o
bueno eso que miraba el código fuente de las dos plantillas y veo el código puesto antes de /head, sin embargo no puedo ver las imagenes a menos que le de a f5.
No estoy muy acostumbrada a encontrar cosas en el código fuente, allí no se ve lo que está en la sidebar no?
Porque no puedo ver donde tienen el html :o
Y con respecto a Te Propongo vos decís que las ves con FireFox, pero yo no, y eso que anoche se actualizó...
En FolkTango si, ahí en ningún momento me dio problemas y está antes de /body, ya no entiendo mas nada :O
Y con Explorer que pasa? yo no veo nada :o
Si soy la misma Knelita
k_nelita en el código fuente lo que tenemos añadido en la sidebar lo veremos dentro de un div. "<div class='..." la mejor forma de localiarlo es hacerlo con el título de la sidebar donde se encuentra. En el código fuente podemos ver todo, menos... lo que se llama códigos condicionales que son esos que sólo vemos si expandimos la plantilla.
El visualizar algunas cosas con diferente navegador y conseguir que se vea igual en Firefox y Explorer es algo que trae mucha cola como decimos aquí.
Lo que si está claro es que si en un blog se ve en otro también debe verse :O
Me daré una vuelta y te digo como está ahora.
Hola Gem@, quería poner otra vez este efecto en uno de mis blogs, tal como me diste el enlace de esta entrada, pero no funciona ya la descarga del script? :o
Igual me gustaría ponerlo entero dentro de la plantilla, ya no alojarlo como antes, me darías una mano con esto?
No me acuerdo de nada :( está bien que pasaron dos años pero... Me estaré poniendo grande? :D
Un besote guapísima ;)
En serio que estás muy guapa ehh esa foto que has puesto en el footer estás muy linda :D
Gem@@@@ ya lo logré!!! Ja jaja :D no estoy tan viejaaa, pude hacer todo, ya tengo estrellitas de colores en Te Propongo... ;)
Gracias igual, tu blog me sirve aunque no estès :D
Claro que si estás mejor ;)
Te quiero Gem@@@!!
PD: Espero que se vea bien en todos los navegadores, acá lo estoy viendo con Chrome. Ahh mi hijo está en la pc de escritorio con FireFox y también las ve, el asunto será saber si se ven en IE...
Besoteeeessss ;)
:: Estupendo knelita!! con Excplorer 8 he probado y se ven muy bien :)
La foto es una del concurso, ohhh estaba tan contenta que creo que se reflejaba en la cara.
Van a tener que darme un premio todos los días para estar guapa jajajajaja
Besotes amiga yo también te quiero!!
Nota: solo los miembros de este blog pueden publicar comentarios.